<template>
  <div>
    <TopNav title="个人主页背景" :bgc="$colorObj.color" />
    <div class="main">
      <!-- 推荐背景 -->
      <div class="recommend">
        <p>推荐背景</p>
        <div class="items">
          <BgcItem
            :url="item.url"
            :id="item.id"
            v-for="item in bgList"
            :key="item.id"
            @clicked="handelClick(item.id)"
            :btnBgc="item.id == current ? '' : setBgc"
            :current="item.id == current"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopNav from "@/components/TopNav";
import BgcItem from "@/components/BgcItem";
export default {
  components: {
    TopNav,
    BgcItem,
  },
  data() {
    return {
      bgList: [
        {
          id: 1,
          url: require("@/assets/1.jpg"),
        },
        {
          id: 2,
          url: require("@/assets/2.jpg"),
        },
        {
          id: 3,
          url: require("@/assets/3.jpg"),
        },
        {
          id: 4,
          url: require("@/assets/4.jpg"),
        },
        {
          id: 5,
          url: require("@/assets/5.jpg"),
        },
        {
          id: 6,
          url: require("@/assets/6.jpg"),
        },
        {
          id: 7,
          url: require("@/assets/7.jpg"),
        },
        {
          id: 8,
          url: require("@/assets/8.jpg"),
        },
        {
          id: 9,
          url: require("@/assets/9.jpg"),
        },
        {
          id: 10,
          url: require("@/assets/10.jpg"),
        },
      ],
      // 声明变量保存当前点击的组件id, 用来排他使用
      current: this.$backgroundImg.id,
      setBgc: {
        background: this.$colorObj.color,
        borderColor: this.$colorObj.color,
      },
    };
  },
  // mounted() {
  //   // 判断全局属性中是否有id, 如果没有则添加一个默认值
  //   this.current = this.$backgroundImg.id ? this.$backgroundImg.id : 1;
  // },
  methods: {
    handelClick(id) {
      // 将当前点击组件的id保存起来, 用来排他
      this.current = id;
      // 将对应的图片保存到全局变量中
      this.$backgroundImg.url = this.bgList[id - 1].url;
      // 将id保存到全局属性中
      this.$backgroundImg.id = id;
      console.log(this.$backgroundImg);
      this.$toast.success("更换成功");
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 46 / 360 * 100vw 12 / 360 * 100vw;
  .recommend {
    p {
      font-size: 14 / 360 * 100vw;
      height: 40 / 360 * 100vw;
      line-height: 40 / 360 * 100vw;
    }
    .items {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}
</style>
